<template>
	<view style="width: 100%; height: 100vh; display: flex;flex-direction: column;justify-content: center;align-items: center;">
		<!-- 卡片 -->
		<view class="card">
			<view
				style="width: 702rpx;height: 180rpx; background-color: #FFFFFF;display: flex;justify-content: space-around;align-items: center;
			box-shadow:0 1px 11px #B4D4FF;"
			>
				<view style="height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<text style="font-size: 36rpx;color: #3187FB;">{{ data.coach ? data.coach : 0 }}人</text>
					<text style="font-size: 28rpx;color: #999999;">教练/销售</text>
				</view>
				<view style="height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<text style="font-size: 36rpx;color: #3187FB;">{{ data.user_num ? data.user_num : 0 }}</text>
					<text style="font-size: 28rpx;color: #999999;">用户总数</text>
				</view>
				<view style="height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<text style="font-size: 36rpx;color: #3187FB;">{{ data.sign_up ? data.sign_up : 0 }}</text>
					<text style="font-size: 28rpx;color: #999999;">报名人数</text>
				</view>
			</view>
		</view>
		<view class="fixed" style="display: none;">
			<view class="top" @click="gotoPage(1)">教练销售</view>
			<view class="bottom" @click="gotoPage(2)">客服账户</view>
		</view>

		<u-popup v-model="show" mode="center" border-radius="14" closeable :title-style="{ color: 'red' }">
			<view class="slot-content padding ">
				<view class="flex  justify-center align-center "><text class="f32 block text-center " style="color: #333333;">添加客服</text></view>
				<view class="ss ">
					<input
						type="text"
						class="padding-left"
						style="display: flex; align-items: center;  height: 100%;"
						placeholder-style="color:'#999999'"
						v-model="invite"
						placeholder="请输入客服的邀请码"
					/>
				</view>

				<view class="btn" @click="confirm1">确认添加</view>
			</view>
		</u-popup>

		<u-popup v-model="show1" mode="center" border-radius="14" closeable :title-style="{ color: 'red' }">
			<view class="slot-content padding ">
				<view class="flex  justify-center align-center "><text class="f32 block text-center " style="color: #333333;">添加教练销售</text></view>
				<view class="ss ">
					<input
						type="text"
						class="padding-left"
						style="display: flex; align-items: center;  height: 100%;"
						placeholder-style="color:'#999999'"
						v-model="invite"
						placeholder="请输入教练销售的邀请码"
					/>
				</view>

				<view class="btn" @click="confirm1">确认添加</view>
			</view>
		</u-popup>

		<!-- <u-modal v-model="show" :title-style="{ color: 'red' }" @confirm="confirm1">
			<view class="slot-content" style="padding: 10rpx;">
				<input
					class="indd"
					type="number"
					v-model="invite"
					auto-height
					placeholder-style=" text-align: center;"
					placeholder="请输入客服的邀请码"
					:cursor="50"
					style="margin: 20rpx 0 ;"
				/>
			</view>
		</u-modal>
		<u-modal v-model="show1" :title-style="{ color: 'red' }" @confirm="confirm1">
			<view class="slot-content" style="padding: 10rpx;">
				<input
					class="indd"
					type="number"
					v-model="invite"
					auto-height
					placeholder-style=" text-align: center;"
					placeholder="请输入教练销售的邀请码"
					:cursor="50"
					style="margin: 20rpx 0 ;"
				/>
			</view>
		</u-modal> -->
		<!-- 用户列表 -->
		<scroll-view
			:enable-flex="true"
			:show-scrollbar="false"
			@scrolltolower="lower"
			:scroll-y="true"
			style="width: 702rpx;height: 170rpx; display: flex;flex-direction: column; align-items: center;flex: auto;flex-basis: 50vh;
		"
		>
			<!-- item -->
			<view
				style="height: 220rpx; margin-top: 15rpx; display: flex;flex-direction: column;justify-content: center;align-items: center;
			padding-left: 24rpx;padding-right: 24rpx;"
				v-for="(item, index) in list"
				:key="index"
			>
				<view style="height: 220rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<!-- 姓名 -->
					<view style="width: 654rpx;text-align: start;font-size: 32rpx;color: #333333;">{{ item.user_nickname }}</view>
					<!-- 数据情况 -->
					<view style="width: 654rpx;margin-top: 39rpx; display: flex; flex-direction: column;">
						<view style=" display: flex; justify-content: space-between;">
							<view style="font-size: 26rpx;color: #666666;">用户数量</view>
							<view style="font-size: 26rpx;color: #666666; margin: 5rpx;">{{ item.user_number }} 人</view>
						</view>
						<view style="display: flex; justify-content: space-between;">
							<view style="font-size: 26rpx;color: #666666;">报名人数</view>
							<view style="font-size: 26rpx;color: #666666;margin: 5rpx;">{{ item.user_apply }} 人</view>
						</view>
					</view>
					<view style="width: 702rpx;height: 10rpx;background-color: #F7F8FF;margin-top: 29rpx;"></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			page: 1,
			pagesize: 10,
			show: false,
			show1: false,
			data: {},
			invite: '',
			identity: '',
			list: [],
		};
	},
	onLoad() {
		this.getData();
	},
	methods: {
		gotoPage(e) {
			if (e == 1) {
				this.show1 = true;
				this.identity = 2;
				this.invite = '';
			} else {
				this.show = true;
				this.identity = 1;
				this.invite = '';
			}
		},
		// 滑动到页面底部触发
		lower() {
			console.log('滑动到页面底部触发');
			this.getData();
		},
		confirm1() {
			this.setUpSales();
		},
		async getData() {
			uni.$showLoading();

			let res;
			try {
				res = await this.$request.post('api/User/branch_school2', {
					data: {
						uid: uni.getStorageSync('id'),
						page: this.page,
						limit: this.pagesize,
					},
				});
				if (res.data.code == 1) {
					this.data = res.data.data;
					this.list = [...this.list, ...res.data.data.list];
					this.page += 1;
				}
				uni.hideLoading();
				console.log('this.list ', this.list);
			} catch (e) {
				//TODO handle the exception
				// return uni.showToast({
				// 	title: '网络连接失败！',
				// 	icon: 'none',
				// });
				this.emptyShow = true;
			}
		},
		async setUpSales() {
			let res;
			try {
				res = await this.$request.post('api/User/set_person', {
					data: {
						uid: uni.getStorageSync('id'),
						invite: this.invite, // 邀请码
						identity: this.identity, // 1客服账户 2教练销售
					},
				});
				if (!res.data.code) return uni.$showMsg(res.data.msg);
				this.invite = '';
				uni.$showMsg(res.data.msg);
				setTimeout(() => {
					this.show = false;
					this.show1 = false;
					this.getData();
				}, 500);
			} catch (e) {
				//TODO handle the exception
				// return uni.showToast({
				// 	title: '网络连接失败！',
				// 	icon: 'none',
				// });
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.slot-content {
	width: 600rpx;
	height: 400rpx;
	background: #ffffff;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	.ss {
		width: 500rpx;
		height: 80rpx;
		border: 2rpx solid #f0f0f0;
		border-radius: 6rpx;
		margin: 0 auto;
	}
	.btn {
		display: flex;

		align-items: center;
		justify-content: center;
		width: 360rpx;
		height: 90rpx;
		background: #3187fb;
		border-radius: 20rpx;

		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		line-height: 33px;
	}
}

.indd {
	display: block;
	display: flex;
	align-items: center;
	justify-content: center;
	//padding-left: 20rpx;
}
.fixed {
	position: fixed;
	display: flex;
	z-index: 9999;
	flex-direction: column;
	justify-content: space-evenly;
	bottom: 150rpx;
	right: 50rpx;
	display: flex;
	width: 200rpx;
	height: 180rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
	.top {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200rpx;
		height: 70rpx;
		background: #3187fb;
		opacity: 0.9;
		border-radius: 35rpx;
	}
	.bottom {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200rpx;
		height: 70rpx;
		background: #3187fb;
		opacity: 0.9;
		border-radius: 35rpx;
	}
}

.card {
	width: 100%;
	height: 236rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3187fb+50,ffffff+50 */
	background: rgb(49, 135, 251);
	/* Old browsers */
	background: -moz-linear-gradient(top, rgb(49, 135, 251) 50%, rgb(255, 255, 255) 50%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(49, 135, 251) 50%, rgb(255, 255, 255) 50%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(49, 135, 251) 50%, rgb(255, 255, 255) 50%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3187fb', endColorstr='#ffffff', GradientType=0);
	/* IE6-9 */
}
</style>
